import React from 'react';
import { Chart, Tooltip, Geom, Legend, Axis, View } from 'bizcharts';
import DataSet from '@antv/data-set';
import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';
import styles from './index.less';

@autoHeight()
class TimelineChartFu extends React.Component {
  render() {
    const {
      tickInterval,
      yMin = 0,
      title,
      height = 420,
      padding = [50, 60, 50, 60],
      titleMap = {
        y1: 'y1',
        y2: 'y2',
        y3: 'y3',
        y4: 'y4',
      },
      borderWidth = 2,
      data: sourceData,
      orSliderGen,
    } = this.props;

    const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0, y4: 0 }];

    data.sort((a, b) => a.x - b.x);

    let max = 0;
    let min = 100;
    let max2 = 0;
    let min2 = 100;
    for (let i = 0; i < data.length; i++) {
      if (data[i] && data[i].y1 && data[i].y2) {
        max = Math.max(
          max,
          [...data].sort((a, b) => b.y1 - a.y1)[i].y1,
          [...data].sort((a, b) => b.y2 - a.y2)[i].y2
          // [...data].sort((a, b) => b.y3 - a.y3)[i].y3
        );
        min = Math.min(
          min,
          [...data].sort((a, b) => b.y1 - a.y1)[i].y1,
          [...data].sort((a, b) => b.y2 - a.y2)[i].y2
          // [...data].sort((a, b) => b.y3 - a.y3)[i].y3
        );

        max2 = Math.max(max2, [...data].sort((a, b) => b.y3 - a.y3)[i].y3);
        min2 = Math.min(min2, [...data].sort((a, b) => b.y3 - a.y3)[i].y3);
      }
    }

    const ds = new DataSet({
      state: {
        start: data[0].x,
        end: data[data.length - 1].x,
      },
    });

    const dv = ds.createView();
    dv.source(data)
      .transform({
        type: 'filter',
        callback: obj => {
          const date = obj.x;
          return date <= ds.state.end && date >= ds.state.start;
        },
      })
      .transform({
        type: 'map',
        callback(row) {
          const newRow = { ...row };
          newRow[titleMap.y1] = row.y1;
          newRow[titleMap.y2] = row.y2;
          // newRow[titleMap.y3] = row.y3;
          return newRow;
        },
      })
      .transform({
        type: 'fold',
        fields: [titleMap.y1, titleMap.y2 /* , titleMap.y3 */], // 展开字段集
        key: 'key', // key字段
        value: 'value', // value字段
      });
    // 此处修改了显示成  年月日  5天隔一次显示
    const timeScale = {
      type: 'cat',
      // tickInterval: tickInterval,
      tickCount: 10,

      // mask: 'HH:mm',
      // mask: 'YYYY-MM-DD',
      range: [0, 1],
    };

    const cols = {
      x: timeScale,
      /* y1:{
        alias: '新二号',
      },
      y2:{
        alias: 'SPY',
      },
      y3:{
        alias: '差值',
      }, */
      y3: {
        alias: '差值',
      },
      y4: {
        formatter(value) {
          return `${(value * 100).toFixed(4).replace(/[.]?0+$/g, '')}%`;
        },
        alias: '超额收益',
      },
    };

    const SliderGen = () => (
      <Slider
        padding={[0, padding[1] + 40, 0, padding[3] + 40]}
        // padding={[0, padding[1] + 20, 0, padding[3]+ 0]}
        width="auto"
        height={32}
        xAxis="x"
        yAxis="y1"
        scales={{ x: timeScale }}
        data={data}
        start={ds.state.start}
        end={ds.state.end}
        backgroundChart={{ type: 'line' }}
        onChange={({ startValue, endValue }) => {
          ds.setState('start', startValue);
          ds.setState('end', endValue);
        }}
      />
    );
    /*  const chartTitle = {
        position: 'end'
      } */
    return (
      <div className={styles.timelineChart} style={{ height: height + 30 }}>
        <div>
          {title && <h4>{title}</h4>}
          <Chart height={height} padding={padding} data={dv} scale={cols} renderer="svg" forceFit>
            <Axis name="x" />
            <Tooltip />
            <Legend name="key" position="top" />
            <Axis name="y4" />
            <Geom
              type="interval"
              position="x*y4"
              color={[
                'y4',
                y4 => {
                  if (y4 > 0) return 'rgba(138,188,80,0.2)';
                  return 'rgba(222,44,84,0.2)';
                },
              ]}
            />
            <Geom
              type="line"
              position="x*value"
              size={borderWidth}
              color={['key', ['#4e81bd', '#c1504c']]}
            />

            <Geom
              type="line"
              position="x*y3"
              size={borderWidth}
              opacity={0.7}
              color={['key', '#999999']}
              tooltip={[
                'x*y3',
                (x, y3) => {
                  return {
                    name: '差值',
                    value: y3,
                  };
                },
              ]}
            />

            {/*  <Geom type="line" position="x*y1" size={borderWidth} color={["key", ]}  />
            <Geom type="line" position="x*y2" size={borderWidth} color={["key", "#c1504c"]}  /> */}
            <Axis name="y2" visible={false} />
            <Axis name="y3" visible={false} />
            <Axis name="y1" />
          </Chart>

          {orSliderGen ? (
            <div style={{ marginRight: -20 }}>
              <SliderGen />
            </div>
          ) : null}

          <br />
        </div>
      </div>
    );
  }
}

export default TimelineChartFu;
